<template>
  <a-modal
    v-model:open="OpenGame"
    :width="modelWidth"
    :footer="null"
    :bodyStyle="bodyStyle"
    centered="centered"
  >
    <template #title>
      <div class="mod_header" :style="GameheadStyle">
        <div>
          <FullscreenOutlined
            v-if="centered"
            :style="GameiconStyle"
            @click="handleBigScreen"
          />
          <FullscreenExitOutlined
            v-else
            :style="GameiconStyle"
            @click="handleSmallScreen"
          />
        </div>

        <h1>{{ gameName }}</h1>
        <div></div>
      </div>
    </template>
    <div class="mod_content">
      <slot name="content"></slot>
    </div>
  </a-modal>
</template>

<script setup>
import { ref, defineProps, watch, inject } from "vue";

import {
  FullscreenOutlined,
  FullscreenExitOutlined,
} from "@ant-design/icons-vue";

const props = defineProps([
  "GamebodyStyle",
  "openGame",
  "GameheadStyle",
  "GameiconStyle",
  "gameName",
]);
const open = ref(false);
const modelWidth = ref("57.75rem");
const bodyStyle = ref({
  height: "36.25rem",
  backgroundColor: "#faf8ef",
});
const gameName = ref("");
// 垂直居中
const OpenGame = inject("openGame");
console.log("OpenGame", OpenGame,inject("openGame"));

const centered = ref(true);
watch(
  () => OpenGame.value,
  (val) => {
    console.log("openGame", 123);

    open.value = val;
    bodyStyle.value = {
      height: props.GamebodyStyle.height,
      backgroundColor: props.GamebodyStyle.backgroundColor,
    };
    gameName.value = props.gameName;
    console.log("123", bodyStyle.value);
  }
);

// 全屏
const handleBigScreen = () => {
  console.log("全屏");
  modelWidth.value = "100vw";
  centered.value = false;
  bodyStyle.value = {
    height: "100vh",
    backgroundColor: props.GamebodyStyle.backgroundColor,
  };
};
// 缩小
const handleSmallScreen = () => {
  console.log("缩小");
  modelWidth.value = "57.75rem";
  centered.value = true;
  bodyStyle.value = {
    height: props.GamebodyStyle.height,
    backgroundColor: props.GamebodyStyle.backgroundColor,
  };
};
const showModal = () => {
  Gameopen.value = true;
};
const handleOk = (e) => {
  console.log(e);
  Gameopen.value = false;
};
</script>

<style lang="scss" scoped>
// 头部样式
.mod_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 3.125rem;
  padding: 0;
  line-height: 3.125rem;
  color: #fff;
  font-size: 1.25rem;
}
// 主体样式
.mod_content {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}
</style>
